<template>
  <div class="home">
    <div class="header">
      <div class="logo">
        卖座电影
      </div>
      <div class="city">
        上海
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="nav">
        <ul>
          <router-link to='/' tag="li">
            <span>正在上映</span>
          </router-link>
          <router-link to='/comingsoon' tag="li">即将上映</router-link>
        </ul>
      </div>
    </div>
    <div class="content">
      <FilmItem v-for="(item, index) in film_list" :key="index" :item="item"/>
    </div>
  </div>
</template>

<script>
import { getNowPlaying, getComingSoon } from '@/api'
import FilmItem from '@/components/Home/FilmItem'
export default {
  data () {
    return {
      film_list: [],
      page: 0,
      count: 7,
      film_status: true,
      bottom_status: true
    }
  },
  created () {
    if (this.$route.path === '/') {
      this.get_film()
    } else {
      this.get_coming()
    }
  },
  mounted () {
    window.onscroll = e => {
      console.log(document.body.scrollHeight)
      console.log(window.innerHeight)
      console.log(document.body.scrollTop)
      let top = document.body.scrollTop
      let height = window.innerHeight
      let bheight = document.body.scrollHeight
      if (top >= bheight - height - 50 && this.bottom_status && this.film_status) {
        this.bottom_status = false
        if (this.$route.path === '/') {
          this.get_film()
        } else {
          this.get_coming()
        }
      }
    }
  },
  methods: {
    get_film () {
      ++this.page
      getNowPlaying(this.page, this.count).then(data => {
        console.log(data)
        if (data.data.data.page.total === this.page) this.film_status = false
        if (this.$route.path === '/') this.film_list = this.film_list.concat(data.data.data.films)
        this.bottom_status = true
      })
    },
    get_coming () {
      ++this.page
      getComingSoon(this.page, this.count).then(data => {
        console.log(data)
        if (data.data.data.page.total === this.page) this.film_status = false
        if (this.$route.path === '/comingsoon') this.film_list = this.film_list.concat(data.data.data.films)
        this.bottom_status = true
      })
    }
  },
  components: {
    FilmItem
  },
  watch: {
    '$route' (to, from) {
      this.film_list = []
      this.page = 0
      this.bottom_status = true
      this.film_status = true
      if (to.path === '/') {
        this.get_film()
      } else {
        this.get_coming()
      }
    }
  }
}
</script>


<style>
.header {
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 44px;
  color: #666;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo {
  width: 64px;
  text-align: center;
}

.city {
  width: 42px;
}

.nav {
  flex-grow: 2;
  margin-left: 5px;
}

.nav ul {
  display: flex;
  align-items: center;
}

.nav ul li {
  flex-grow: 2;
  text-align: center;
  line-height: 40px;
  border-bottom: 4px solid transparent;
  position: relative;
}

.nav ul li span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 14.66667px;
  margin-top: -7.33333px;
  background: hsla(0, 0%, 94%, .8);
}

.nav ul li.router-link-exact-active {
  border-color: #29cc6d;
}

.content {
  margin-top: 44px;
  padding-bottom: 50px;
}
.home + .tab-bar > .tab-item.router-link-active {
  color:#29cc6d;
}
</style>



